<!--公共考试信息管理-->
<template>
  <div class="wrapper-container">
    <div class="search-container">
      <div style="display: flex;">
        <div class="search-container-item right87">
          <div class="item-name">年份：</div>
          <el-date-picker style="width:156px" v-model="dataForm.year" type="year" value-format="yyyy" size="mini"></el-date-picker>
        </div>
        <div class="search-container-item right87">
          <div class="item-name">考试类型：</div>
          <el-select v-model="dataForm.examTypeId" placeholder="请选择" style="width: 110px" size="mini">
            <el-option v-for="item in gradeList" :key="item.id" :label="item.typeName" :value="item.id"></el-option>
          </el-select>
        </div>
        <div class="search-button color-primary width70 right87" @click="getList">
          <img src="../../assets/assessment/icon-search.png" alt="" />
          <span>查询</span>
        </div>
      </div>
    </div>
    <div class="table-container table-css">
      <el-table :data="tableData" border style="width: 100%" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}"  >
        <el-table-column prop="courseName" label="操作" align="center" width="150">
          <div slot-scope="scope" style="margin-top: 10px;">
            <span class="small-btn color-primary" @click="seeInfo(scope.row)">
              <img src="../../assets/assessment/icon-look.png" alt="" /> 查看成绩
            </span>
          </div>
        </el-table-column>
        <el-table-column prop="examDate" label="考试日期" align="center" width="130"> </el-table-column>
        <el-table-column prop="examTypeName" label="考试类型" align="center"></el-table-column>
        <el-table-column prop="teacherList" label="主考" align="center">
          <template slot-scope="scope">
            <span v-for="item in scope.row.teacherList" :key="item.id">{{item.xm}}，</span>
          </template>
        </el-table-column>
        <el-table-column prop="totalPoint" label="总分" align="center" width="100"></el-table-column>
         <el-table-column prop="excellentLine" label="分数线" align="center">
          <div slot-scope="scope" class="fsx">
            <span class="item-name">优秀线：{{scope.row.excellentLine}}</span>
            <span class="item-name">良好线：{{scope.row.goodLine}}</span>
            <span class="item-name">及格线：{{scope.row.passLine}}</span>
          </div>
        </el-table-column>
        <el-table-column prop="examStatisticsVO" label="考试人数" align="center" width="100">
          <template slot-scope="scope">{{scope.row.examStatisticsVO.totalPeople}}</template>
        </el-table-column>
        <el-table-column prop="examBatchName" label="相关专业班次" align="center">
          <template slot-scope="scope">
            <span v-for="(item,index) in scope.row.examStatisticsVO.classNames" :key="index">{{item}}，</span>
          </template>
        </el-table-column>
        <el-table-column prop="countryInfo" label="全国成绩情况" align="center"></el-table-column>
        <el-table-column prop="examStatisticsVO" label="校区成绩情况" align="center" width="200">
          <div slot-scope="scope" v-if="scope.row.examStatisticsVO">
            <div>优秀人数：{{scope.row.examStatisticsVO.greatCount}}&nbsp;&nbsp;优秀率：{{scope.row.examStatisticsVO.greatRating}}</div>
            <div>良好人数：{{scope.row.examStatisticsVO.goodCount}}&nbsp;&nbsp;良好率：{{scope.row.examStatisticsVO.goodRating}}</div>
            <div>合格人数：{{scope.row.examStatisticsVO.okCount}}&nbsp;&nbsp;合格率：{{scope.row.examStatisticsVO.okRating}}</div>
            <div>不合格人数：{{scope.row.examStatisticsVO.notOkCount}}&nbsp;&nbsp;不合格率：{{scope.row.examStatisticsVO.notOkRating}}</div>
            <div>最高分：{{scope.row.examStatisticsVO.maxScore}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
            <div>平均分：{{scope.row.examStatisticsVO.avrScore}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
          </div>
        </el-table-column>
      </el-table>
    </div>
    <div class="export-button" @click="importExcel">
      <img src="../../assets/assessment/icon-export.png" alt="" />
      <span>导出Excel</span>
    </div>
  </div>
</template>

<script>
import {commonList,examTypeList} from "@/api/exam";
import fileDownload from "js-file-download"
import Axios from 'axios'
export default {
  data() {
    return {
      dataForm:{
        examTypeId:'',//考试类型ID
        current:1,
        size:50,
        year:'',//年份
      },
      tableData: [],
      gradeList:[],
    };
  },
  mounted(){
    this.dataForm.year = new Date().getFullYear()+''
    this.getList();
    this.getTypeList()
  },
  methods: {
      async getTypeList(){
        let res = await examTypeList({size:9999,current:1})
        this.gradeList = [{id:'0000',typeName:'请选择'},...res.data.records]
      },
      async getList(){
        let params = {
          ...this.dataForm,
          examTypeId:this.dataForm.examTypeId == '0000'?'':this.dataForm.examTypeId
        }
        let res = await commonList(params)
        this.tableData = res.data.records
        this.total =  res.total
      },
      //查看成绩单
      seeInfo(row){
        console.log(row)
        this.$router.push({
          path:'/publicExams/infoList/viewTranscript',
          query:{
            id:row.id,
            isFixed:row.isFixed?true:false
          }
        })
      },
      //导出
    importExcel(){
      // 导出需要王总确认
      Axios({
          method: 'get',
          url: this.$store.state.studentUrl.baseUrl+'/examBatch/exportData/manageList',
          params:this.dataForm,
          headers: {'Content-Type': 'application/octet-stream' },
              responseType: 'blob'
      }).then(res => {
          fileDownload(res.data, '公共考试成绩.xlsx');
      }); 
    },
  },
};
</script>
<style lang="less" scoped>
.table-css {
  margin-top: 30px;
  /deep/.el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

 /deep/ .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

}
</style>

<style lang="less" scoped>
@import "../../styles/commonCss.less";
.search-container {
  justify-content: space-between !important;
  align-items: center;
}
.width70{width: 70px;}
.small-btn{width: 110px;margin-bottom: 14px;}
.right87{margin-right: 30px;}
.item-name {
  color: #004ca7;
}
.fsx{
  span{
    display: block;
    margin-bottom: 10px;
  }
}
</style>
